<template>
  <!-- 我的资料 二级tab组件 -->
  <van-tabs
    v-model:active="secondActive"
    animated
    swipeable
    sticky
    offset-top="5rem"
    title-active-color="black"
    title-inactive-color="#777777"
    @click-tab="handelTitle"
  >
    <van-tab title="下载中"> 下载中 </van-tab>
    <van-tab title="已下载">已下载</van-tab>
    <van-tab title="已获取权限">已获取权限</van-tab>
  </van-tabs>
</template>

<script>
import { ref } from "@vue/reactivity";
export default {
  components: {},
  setup() {
    const secondActive = ref(0);
    const shortList = ref([0, 1, 2, 3, 4]);
    const handelTitle = (e) => {
      console.log(e);
    };
    return { secondActive, shortList, handelTitle };
  },
};
</script>

<style lang="less" scoped>
:deep(.van-tabs__content) {
  padding: 0 0.5rem;
  padding-top: 1rem;
  box-sizing: border-box;
}

:deep(.van-tab) {
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.05rem;
}
</style>
